<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .full {
    text-align: center;
    cursor: pointer;
  }

  .full img {
      vertical-align: middle;
  }

  .full:hover img {
      box-shadow: 2px 2px 4px rgba(0,0,0,.45);
  }

  .full:after {
      /* 图片垂直居中显示 */
      display: inline-block;
      content: '';
      width: 0;
      height: 100%;
      vertical-align: middle;
  }

  :-webkit-full-screen img    { height: 60%; }
  :-moz-full-screen img       { height: 60%; }
  :-ms-full-screen img        { height: 60%; }
  :-o-full-screen img         { height: 60%; }
  :full-screen img            { height: 60%; }
  </style>
</head>
<body>
  <div class="full" title="点击全屏浏览"><img src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" /></div>
</body>
<script>
    (function() {
        var runPrefixMethod = function(element, method) {
            var usablePrefixMethod;
            ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
                if (usablePrefixMethod) return;
                if (prefix === "") {
                    // 无前缀，方法首字母小写
                    method = method.slice(0,1).toLowerCase() + method.slice(1);
                    
                }
                
                var typePrefixMethod = typeof element[prefix + method];
                
                if (typePrefixMethod + "" !== "undefined") {
                    if (typePrefixMethod === "function") {
                        usablePrefixMethod = element[prefix + method]();
                    } else {
                        usablePrefixMethod = element[prefix + method];
                    }
                }
            });
            
            return usablePrefixMethod;
        };
        
        if (typeof window.screenX === "number") {
            var eleFull = document.querySelector(".full");
            eleFull.addEventListener("click", function() {
                if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
                    runPrefixMethod(document, "CancelFullScreen");
                    this.title = this.title.replace("退出", "");
                } else if (runPrefixMethod(this, "RequestFullScreen")) {
                    this.title = this.title.replace("点击", "点击退出");
                }
            });
        } else {
            alert("爷，现在是年轻人的时代，您就暂且休息去吧~~");
        }
    })();
</script>
</html>